<template>
  <div class="department">
    <page-search
      @handle-search="handleSearch"
      @handle-reset="handleReset"
      :search-config="searchConfig"
    ></page-search>
    <page-content
      ref="contentRef"
      @create-user-fn="createUser"
      @edit-user-fn="editUser"
      :content-config="contentConfig"
    >
      <template #leader="scope">111-{{ scope.row.leader }}</template>
    </page-content>
    <page-modal ref="modalRef" :modal-config="modalConfig"></page-modal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModal from '@/components/page-modal/page-modal.vue'
import searchConfig from '@/views/main/system/department/config/search.config'
import contentConfig from '@/views/main/system/department/config/content.config'
import modalConfig from '@/views/main/system/department/config/modal.config'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'

const { contentRef, handleSearch, handleReset } = usePageContent()
const { modalRef, showModal: createUser, handleEdit: editUser } = usePageModal()
</script>

<style scoped>
.department {
}
</style>
